Ağaç Görünümü: Hiyerarşik Veri Gezintisi Erişilebilirliği

Ağaç görünümleri, hiyerarşik verileri görüntülemek için temel kullanıcı arayüzü bileşenleridir. Kullanıcıların dosya sistemleri, organizasyon şemaları veya web sitesi menüleri gibi karmaşık yapıları sezgisel bir şekilde gezinmelerine olanak tanır. Ancak, kötü uygulanmış bir ağaç görünümü, özellikle ekran okuyucular ve klavye gezintisi gibi yardımcı teknolojilere bağımlı olan engelli kullanıcılar için önemli erişilebilirlik engelleri oluşturabilir. Bu makale, herkes için olumlu bir kullanıcı deneyimi sağlayarak erişilebilir ağaç görünümleri tasarlamak ve uygulamak için kapsamlı bir kılavuz sunmaktadır.

Ağaç Görünümü Yapısını Anlamak

Bir ağaç görünümü, verileri hiyerarşik, genişletilebilir/daraltılabilir bir formatta sunar. Ağaçtaki her düğümün alt düğümleri olabilir, bu da dallar ve alt dallar oluşturur. En üstteki düğüme kök düğüm denir. Erişilebilirlik hususlarına dalmadan önce temel yapıyı anlamak kritik öneme sahiptir.

İşte yaygın ağaç görünümü öğelerinin bir dökümü:

• Ağaç: Tüm ağaç yapısını tutan genel kapsayıcı eleman.
• Ağaç Öğesi (Treeitem): Ağaçtaki tek bir düğümü temsil eder. Bir dal (genişletilebilir/daraltılabilir) veya bir yaprak (çocuğu olmayan) olabilir.
• Grup: (İsteğe bağlı) Bir ebeveyn ağaç öğesi içindeki alt ağaç öğelerini görsel olarak gruplayan bir kapsayıcı.
• Değiştirici/Açma-Kapama Simgesi: Kullanıcıların bir dalı genişletmesine veya daraltmasına olanak tanıyan görsel bir gösterge (örneğin, bir artı veya eksi işareti, bir ok).
• Etiket: Her ağaç öğesi için görüntülenen metin.

ARIA Rollerinin ve Niteliklerinin Önemi

Erişilebilir Zengin İnternet Uygulamaları (ARIA), HTML elemanlarına anlamsal anlam katan ve onları yardımcı teknolojiler tarafından anlaşılır kılan bir nitelikler paketidir. Ağaç görünümleri oluştururken, ARIA rolleri ve nitelikleri, ağacın yapısını ve davranışını ekran okuyuculara iletmek için çok önemlidir.

Temel ARIA Rolleri:

• role="tree": Tüm ağacı temsil eden kapsayıcı elemana uygulanır. Bu, yardımcı teknolojilere elemanın hiyerarşik bir liste içerdiğini bildirir.
• role="treeitem": Ağaçtaki her düğüme uygulanır. Bu, her düğümü ağaç içindeki bir öğe olarak tanımlar.
• role="group": Alt ağaç öğelerini görsel olarak gruplayan kapsayıcı elemana uygulanır. Her zaman gerekli olmasa da semantiği iyileştirebilir.

Anahtar ARIA Nitelikleri:

• aria-expanded="true|false": Çocukları olan ağaç öğelerine uygulanır. Dalın o anda genişletilmiş (true) mi yoksa daraltılmış (false) mı olduğunu gösterir. Kullanıcı düğümü genişletip daralttıkça bu niteliği JavaScript kullanarak dinamik olarak güncelleyin.
• aria-selected="true|false": Düğümün o anda seçili olup olmadığını belirtmek için ağaç öğelerine uygulanır. Aynı anda yalnızca bir düğüm seçilmelidir (uygulamanız çoklu seçimi gerektirmiyorsa; bu durumda role="tree" elemanında aria-multiselectable="true" kullanın).
• aria-label="[etiket metni]" veya aria-labelledby="[etiket elemanının ID'si]": Ağaç veya bireysel ağaç öğeleri için açıklayıcı bir etiket sağlar. Etiket görsel olarak mevcut değilse aria-label kullanın; aksi takdirde, ağaç öğesini görsel etiketiyle ilişkilendirmek için aria-labelledby kullanın.
• tabindex="0": Başlangıçta odaklanılan ağaç öğesine (genellikle ilkine) uygulanır. Diğer tüm ağaç öğelerine odaklanana kadar (örneğin, klavye gezintisi yoluyla) tabindex="-1" kullanın. Bu, doğru klavye gezinme akışını sağlar.

Örnek ARIA Uygulaması:

İşte ARIA nitelikleriyle bir ağaç görünümünün nasıl yapılandırılacağına dair temel bir örnek:

<ul role="tree" aria-label="Dosya Sistemi"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Kök Klasör</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Klasör 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Dosya 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Dosya 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Klasör 2</span></li> </ul> </li> </ul>

Klavye ile Gezinti

Klavye ile gezinme, fare kullanamayan kullanıcılar için çok önemlidir. İyi tasarlanmış bir ağaç görünümü, yalnızca klavye kullanılarak tamamen gezilebilir olmalıdır. İşte standart klavye etkileşimleri:

• Yukarı Ok: Odağı ağaçtaki bir önceki düğüme taşır.
• Aşağı Ok: Odağı ağaçtaki bir sonraki düğüme taşır.
• Sol Ok:
  • Düğüm genişletilmişse, düğümü daraltır.
  • Düğüm daraltılmışsa veya çocuğu yoksa, odağı düğümün ebeveynine taşır.
• Sağ Ok:
  • Düğüm daraltılmışsa, düğümü genişletir.
  • Düğüm genişletilmişse, odağı ilk çocuğa taşır.
• Home: Odağı ağaçtaki ilk düğüme taşır.
• End: Odağı ağaçtaki son görünür düğüme taşır.
• Boşluk Çubuğu veya Enter: Odaklanmış düğümü seçer (eğer seçim destekleniyorsa).
• Yazma (bir harf veya sayı): Odağı, yazılan karakterle başlayan bir sonraki düğüme taşır. Sonraki her tuşa basışta aramaya devam eder.
• Artı (+): O anda odaklanmış düğümü genişletir (daraltılmış durumdayken Sağ Ok ile eşdeğerdir).
• Eksi (-): O anda odaklanmış düğümü daraltır (genişletilmiş durumdayken Sol Ok ile eşdeğerdir).
• Yıldız (*): Mevcut seviyedeki tüm düğümleri genişletir (evrensel olarak desteklenmez ancak genellikle faydalıdır).

Klavye Gezintisi için JavaScript Uygulaması:

Klavye olaylarını yönetmek ve odağı buna göre güncellemek için JavaScript'e ihtiyacınız olacak. İşte basitleştirilmiş bir örnek:

const tree = document.querySelector('[role="tree"]'); const treeitems = document.querySelectorAll('[role="treeitem"]'); tree.addEventListener('keydown', (event) => { const focusedElement = document.activeElement; let nextElement; switch (event.key) { case 'ArrowUp': event.preventDefault(); // Sayfanın kaymasını engelle // Önceki ağaç öğesini bulma mantığı (DOM'da gezinmeyi gerektirir) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Sonraki ağaç öğesini bulma mantığı // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Düğümü daralt focusedElement.setAttribute('aria-expanded', 'false'); } else { // Odağı ebeveyne taşı nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Düğümü genişlet focusedElement.setAttribute('aria-expanded', 'true'); } else { // Odağı ilk çocuğa taşı nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Boşluk Çubuğu case 'Enter': event.preventDefault(); // Odaklanmış düğümü seçme mantığı selectNode(focusedElement); break; default: // O karakterle başlayan düğümlere gitmek için karakter yazımını işle break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

Klavye Gezintisi Uygulaması için Önemli Hususlar:

• Odak Yönetimi: Her zaman yalnızca bir ağaç öğesinin tabindex="0" değerine sahip olduğundan emin olun. Odağı taşırken, tabindex niteliklerini buna göre güncelleyin.
• DOM Gezintisi: Sonraki ve önceki ağaç öğelerini, ebeveyn düğümleri ve alt düğümleri bulmak için DOM'da verimli bir şekilde gezinin. Bu süreci basitleştirmek için yardımcı fonksiyonlar kullanmayı düşünün.
• Olay Önleme: Ok tuşlarını kullanırken tarayıcının varsayılan eylemlerini (örneğin, kaydırma) gerçekleştirmesini önlemek için event.preventDefault() kullanın.
• Karakter Yazma: Kullanıcıların belirli bir karakterle başlayan düğümlere hızlıca gitmelerini sağlayan karakter yazma mantığını uygulayın. Arama dizesinin ne zaman temizleneceğine karar vermek için son tuşa basma zamanını saklayın.

Görsel Tasarım ve Erişilebilirlik

Görsel tasarım, ağaç görünümlerinin kullanılabilirliğinde ve erişilebilirliğinde çok önemli bir rol oynar. İşte bazı yönergeler:

• Net Görsel Hiyerarşi: Ağacın hiyerarşisini açıkça belirtmek için girintileme ve görsel ipuçları (örneğin, klasörler ve dosyalar için farklı simgeler) kullanın.
• Yeterli Renk Kontrastı: Metin ile arka plan arasında ve ağaç görünümünün farklı öğeleri arasında yeterli renk kontrastı sağlayın. Kontrast oranlarını doğrulamak için WebAIM Kontrast Denetleyicisi gibi araçları kullanın.
• Odak Göstergesi: O anda odaklanmış ağaç öğesi için net ve görünür bir odak göstergesi sağlayın. Bu, klavye kullanıcıları için esastır. Yalnızca renge güvenmeyin; bir kenarlık, dış çizgi veya arka plan değişikliği kullanmayı düşünün.
• Genişletme/Daraltma Göstergeleri: Genişletme/daraltma göstergeleri için net ve anlaşılır simgeler (örneğin, artı/eksi işaretleri, oklar) kullanın. Bu simgelerin yeterli kontrasta sahip olduğundan ve kolayca tıklanabilecek kadar büyük olduğundan emin olun.
• Bilgi İletmek İçin Yalnızca Renk Kullanmaktan Kaçının: Bir ağaç öğesinin durumunu (örneğin, seçili, genişletilmiş, hata) belirtmek için yalnızca renge güvenmeyin. Metin etiketleri veya simgeler gibi alternatif görsel ipuçları sağlayın.

Ekran Okuyucu Hususları

Ekran okuyucu kullanıcıları, ağaç görünümlerini anlamak ve onlarla etkileşim kurmak için ARIA niteliklerine ve klavye gezintisine güvenirler. İşte ekran okuyucu erişilebilirliği için bazı önemli hususlar:

• Açıklayıcı Etiketler: Ağaç ve bireysel ağaç öğeleri için açıklayıcı etiketler sağlamak amacıyla aria-label veya aria-labelledby kullanın. Bu etiketler kısa ve bilgilendirici olmalıdır.
• Durum Bildirimleri: Durum değişikliklerinin (örneğin, bir düğümü genişletme/daraltma, bir düğümü seçme) ekran okuyucu tarafından doğru bir şekilde duyurulduğundan emin olun. Bu, aria-expanded ve aria-selected niteliklerinin doğru bir şekilde güncellenmesiyle sağlanır.
• Hiyerarşi Bildirimleri: Ekran okuyucular, hiyerarşideki her düğümün seviyesini duyurmalıdır (örneğin, "Seviye 2, Klasör 1"). Bu, ARIA rolleri doğru uygulandığında çoğu ekran okuyucu tarafından otomatik olarak yönetilir.
• Klavye Gezintisi Tutarlılığı: Klavye gezintisinin farklı tarayıcılar ve ekran okuyucular arasında tutarlı ve öngörülebilir olduğundan emin olun. Herhangi bir tutarsızlığı belirlemek ve çözmek için ağaç görünümünüzü birden fazla ekran okuyucuyla (örneğin, NVDA, JAWS, VoiceOver) test edin.
• Aşamalı Geliştirme: JavaScript devre dışı bırakılırsa, ağaç görünümü daha düşük bir durumda da olsa erişilebilir olmalıdır. JavaScript olmasa bile temel düzeyde bir erişilebilirlik sağlamak için anlamsal HTML (örneğin, iç içe listeler) kullanmayı düşünün.

Tarayıcılar Arası Uyumluluk

Erişilebilirlik, farklı tarayıcılar ve işletim sistemleri arasında tutarlı olmalıdır. Ağaç görünümünüzü aşağıdakiler üzerinde kapsamlı bir şekilde test edin:

• Masaüstü Tarayıcılar: Chrome, Firefox, Safari, Edge
• Mobil Tarayıcılar: Chrome (Android ve iOS), Safari (iOS)
• İşletim Sistemleri: Windows, macOS, Linux, Android, iOS
• Ekran Okuyucular: NVDA (Windows), JAWS (Windows), VoiceOver (macOS ve iOS)

ARIA niteliklerini ve klavye davranışını incelemek için tarayıcı geliştirici araçlarını kullanın. Herhangi bir tutarsızlığa veya görüntüleme sorununa dikkat edin.

Test Etme ve Doğrulama

Düzenli test, ağaç görünümünüzün erişilebilirliğini sağlamak için esastır. İşte bazı test yöntemleri:

• Manuel Test: Ağaç görünümünde gezinmek ve tüm özelliklerin erişilebilir olduğunu doğrulamak için bir ekran okuyucu ve klavye kullanın.
• Otomatik Test: Potansiyel erişilebilirlik sorunlarını belirlemek için erişilebilirlik test araçlarını (örneğin, axe DevTools, WAVE) kullanın.
• Kullanıcı Testi: Ağaç görünümünüzün erişilebilirliği hakkında gerçek dünya geri bildirimi almak için engelli kullanıcıları test sürecine dahil edin.
• WCAG Uyumluluğu: Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.1 Seviye AA'yı karşılamayı hedefleyin. WCAG, web içeriğini daha erişilebilir hale getirmek için uluslararası olarak tanınan bir dizi yönerge sunar.

Erişilebilir Ağaç Görünümleri için En İyi Uygulamalar

Erişilebilir ağaç görünümleri tasarlarken ve uygularken izlenmesi gereken bazı en iyi uygulamalar şunlardır:

• Anlamsal HTML ile Başlayın: Ağaç görünümünün temel yapısını oluşturmak için anlamsal HTML elemanlarını (örneğin, <ul>, <li>) kullanın.
• ARIA Rollerini ve Niteliklerini Uygulayın: Anlamsal anlam katmak ve yardımcı teknolojilere bilgi sağlamak için ARIA rollerini ve niteliklerini kullanın.
• Sağlam Klavye Gezintisi Uygulayın: Ağaç görünümünün yalnızca klavye kullanılarak tamamen gezilebilir olduğundan emin olun.
• Net Görsel İpuçları Sağlayın: Ağaç görünümünün hiyerarşisini, durumunu ve odağını açıkça belirtmek için görsel tasarım kullanın.
• Ekran Okuyucularla Test Edin: Ekran okuyucu kullanıcıları için erişilebilir olduğunu doğrulamak amacıyla ağaç görünümünü birden fazla ekran okuyucuyla test edin.
• WCAG Uyumluluğunu Doğrulayın: Erişilebilirlik standartlarını karşıladığından emin olmak için ağaç görünümünü WCAG yönergelerine göre doğrulayın.
• Kodunuzu Belgeleyin: Her bir ARIA niteliğinin ve klavye olay işleyicisinin amacını açıklayarak kodunuzu açıkça belgeleyin.
• Bir Kütüphane veya Çerçeve Kullanın (Dikkatli Olun): Saygın bir UI kütüphanesinden veya çerçevesinden önceden oluşturulmuş bir ağaç görünümü bileşeni kullanmayı düşünün. Ancak, bileşenin erişilebilirlik özelliklerini dikkatlice inceleyin ve gereksinimlerinizi karşıladığından emin olun. Her zaman kapsamlı bir şekilde test edin!

İleri Düzey Hususlar

• Geç Yükleme (Lazy Loading): Çok büyük ağaçlar için, düğümleri yalnızca ihtiyaç duyulduğunda yüklemek üzere geç yükleme uygulayın. Bu, performansı artırabilir ve başlangıç yükleme süresini azaltabilir. Geç yüklemenin, düğümler yüklenirken kullanıcıya uygun geri bildirim sağlayarak erişilebilir bir şekilde uygulandığından emin olun. Yükleme durumunu duyurmak için ARIA canlı bölgelerini kullanın.
• Sürükle ve Bırak: Ağaç görünümünüz sürükle ve bırak işlevini destekliyorsa, bunun klavye kullanıcıları ve ekran okuyucu kullanıcıları için de erişilebilir olduğundan emin olun. Düğümleri sürükleyip bırakmak için alternatif klavye komutları sağlayın.
• Bağlam Menüleri: Ağaç görünümünüz bağlam menüleri içeriyorsa, bunların klavye kullanıcıları ve ekran okuyucu kullanıcıları için erişilebilir olduğundan emin olun. Bağlam menüsünü ve seçeneklerini tanımlamak için ARIA niteliklerini kullanın.
• Küreselleştirme ve Yerelleştirme: Ağaç görünümünüzü farklı diller ve kültürler için kolayca yerelleştirilebilecek şekilde tasarlayın. Farklı metin yönlerinin (örneğin, sağdan sola) görsel düzen ve klavye gezintisi üzerindeki etkisini göz önünde bulundurun.

Sonuç

Erişilebilir ağaç görünümleri oluşturmak, dikkatli bir planlama ve uygulama gerektirir. Bu makalede özetlenen yönergeleri izleyerek, ağaç görünümlerinizin engelliler de dahil olmak üzere tüm kullanıcılar tarafından kullanılabilir ve erişilebilir olmasını sağlayabilirsiniz. Erişilebilirliğin yalnızca teknik bir gereklilik olmadığını; kapsayıcı tasarımın temel bir ilkesi olduğunu unutmayın.

Erişilebilirliğe öncelik vererek, yetenekleri ne olursa olsun herkes için daha iyi bir kullanıcı deneyimi yaratabilirsiniz. Kodunuzu düzenli olarak test etmek ve doğrulamak önemlidir. Gerçekten kapsayıcı kullanıcı arayüzleri oluşturmak için en son erişilebilirlik standartları ve en iyi uygulamalarla güncel kalın.